<template>
	<el-dialog :title="title" v-model="model" width="750" :before-close="cancel">

		<el-tabs type="card" @tab-click="tabClick">
			<el-tab-pane label="基本信息"></el-tab-pane>
			<el-tab-pane label="可用单位"></el-tab-pane>
			<el-tab-pane label="增加单位"></el-tab-pane>
		</el-tabs>

		<el-form v-if="activeIndex == '0'" :inline="true" :model="dataForm" :rules="rules" ref="rulesFormRef"
			label-width="100">
			<el-form-item label="物资名称:" prop="materialName">
				<el-input v-model="dataForm.materialName" placeholder="请输入名称"></el-input>
			</el-form-item>
			<el-form-item label="首拼:" prop="spell">
				<el-input v-model="dataForm.spell" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="类别:" prop="category" style="width: 87%;">
				<el-select v-model="dataForm.category">
					<el-option value="==请选择==" clearable>==请选择==</el-option>
					<el-option value="有效" label="有效">有效</el-option>
					<el-option value="无效" label="无效">无效</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="最小单位:" prop="minUnits" style="width: 200px;">
				<el-select v-model="dataForm.minUnits">
					<el-option value="==请选择==" clearable>==请选择==</el-option>
					<el-option value="有效" label="有效">有效</el-option>
					<el-option value="无效" label="无效">无效</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="进价:" prop="stock">
				<div style="display: inline;">
					<el-input v-model="dataForm.stock" placeholder="" style="display: inline;"></el-input> 元/
				</div>
			</el-form-item>
			<el-form-item label="零售价:" prop="retailPrice">
				<div style="display: inline;">
					<el-input v-model="dataForm.retailPrice" placeholder="" style="display: inline;"></el-input> 元/
				</div>
			</el-form-item>
			<el-form-item label="物资代码:">
				<el-input v-model="dataForm.materialCode" placeholder="" style="width: 180px;"></el-input>
			</el-form-item>
			<el-form-item label="生产商:" style="width: 88%;">
				<el-input v-model="dataForm.production" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="物资图片:">
				<!-- :show-file-list="false" :是不显示进度条 -->
				<el-upload style="width: 312px;" :show-file-list="false" :on-success="uploadSuccess"
					:on-error="uploadError" :action="url" class="avatar-uploader">
					<img v-if="dataForm.production" :src="url + dataForm.production" class="avatar">
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item label="品牌:" style="width: 190px">
				<el-input v-model="dataForm.brand" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="最小起订数:" style="width: 190px;">
				<el-input v-model="dataForm.minCount" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="注册证号:" style="width: 190px;">
				<el-input v-model="dataForm.register" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="型号规格:" style="width: 190px;">
				<el-input v-model="dataForm.model" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="是否复用:" style="width: 200px;">
				<el-checkbox v-model="dataForm.reuse" label="是" size="large" />
			</el-form-item>
			<el-form-item label="是否跟台:" style="width: 190px;">
				<el-checkbox v-model="dataForm.platform" label="是" size="large" />
			</el-form-item>
			<el-form-item label="是否零库存:" style="width: 200px;">
				<el-checkbox v-model="dataForm.inventory" label="是" size="large" />
			</el-form-item>
			<el-form-item label="自负性质:" style="width: 190px;">
				<el-select v-model="dataForm.nature">
					<el-option value="==请选择==" clearable>==请选择==</el-option>
					<el-option value="有效" label="有效">有效</el-option>
					<el-option value="无效" label="无效">无效</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="自付比例:" style="width: 190px;">
				<el-input v-model="dataForm.proportion" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="省医保代码:" style="width: 190px;">
				<el-input v-model="dataForm.SHealthInsurance" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="国家医保代码:" style="width: 300px;">
				<el-input v-model="dataForm.healthInsurance" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="细分代码" style="width: 300px;">
				<el-input v-model="dataForm.code" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="账薄类别:" style="width: 180px;">
				<el-input v-model="dataForm.accountBook" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="核算类别:" style="width: 280px;">
				<el-input v-model="dataForm.check" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="选项:" style="width: 280px;">
				<el-checkbox v-model="dataForm.valid" label="有效" checked size="large" />
				<el-checkbox v-model="dataForm.medical" label="医用耗材" size="large" />
			</el-form-item>
		</el-form>

		<el-form v-if="activeIndex == '1'" :inline="true" :model="dataForm" :rules="rules" ref="rulesFormRef"
			label-width="100">
			<el-form-item label="单位:" prop="unit">
				<el-select v-model="dataForm.unit" style="width: 200px;">
					<el-option value="==请选择==" clearable>==请选择==</el-option>
					<el-option value="有效" label="有效">有效</el-option>
					<el-option value="无效" label="无效">无效</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="转化因子:" prop="conversion">
				<el-input v-model="dataForm.conversion" placeholder=""></el-input>
			</el-form-item>
			<el-form-item>
				<div style="margin-left: 490px;">
					<el-button type="primary">清楚</el-button>
					<el-button type="primary">确定</el-button>
				</div>
			</el-form-item>
			<el-table :data="dataList" border style="height: 300px;">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="unit" label="单位"></el-table-column>
				<el-table-column prop="conversion" label="转化因子"></el-table-column>
				<el-table-column prop="" label="操作" width="160" fixed="right">
					<template #default="scope">
						<el-button type="success" @click="">修改</el-button>
						<el-button type="danger" @click="">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
		<el-form v-if="activeIndex == '2'" :inline="false" :model="dataForm" :rules="rules" ref="rulesFormRef"
			label-width="100">
			<el-form-item label="单位名称:" prop="unit">
				<el-input v-model="dataForm.unit" placeholder="请输入名称"></el-input>
			</el-form-item>
			<el-form-item label="备注:" prop="remark">
				<el-input v-model="dataForm.remark" placeholder=""></el-input>
			</el-form-item>
			<el-form-item label="选项:" style="width: 280px;">
				<el-checkbox v-model="dataForm.valid" label="有效" checked size="large" />
			</el-form-item>
			<el-form-item>
				<div>
					<el-button type="primary">添加</el-button>
					<el-button type="primary">取消</el-button>
				</div>
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button type="primary" @click="chargingUpdate">确认</el-button>
			<el-button type="danger" @click="cancel">取消</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { onMounted, watch } from 'vue';
	import { Plus, Refresh, Search } from "@element-plus/icons-vue";
	import { ref } from 'vue';
	import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'
	import type { Student } from '@/common/data/student';
	import {
		ElMessage
	} from 'element-plus';
	import { asyncHttp } from '@/common/request';
	import type { student, studentResult } from '@/common/data/student';

	const url = ref('http://localhost:8080/vueprojectts');
	//激活标签页
	const activeIndex = ref('0');
	const ruleFormRef = ref<FormInstance>();
	//自定义组件
	const model = defineModel();
	//弹窗标题
	const title = ref('添加');
	const dataList : any = ref([]);
	const all = async () => {
		console.log('all');
		let result = await asyncHttp<studentResult>("/student/login", "get", { id: 1 });
		dataList.value = result.dataList;
		console.log(dataList.value, '000');
	}
	watch(activeIndex, () => {
		console.log(activeIndex.value == '1');
		all();
		console.log("@222111");
	});
	const dataForm = ref<Student>({
		id: ''
	})
	const rules = ref<FormRules<Student>>({
		materialName: [{
			required: true,
			message: '请输入姓名',
			trigger: 'blur'
		}],
		spell: [{
			required: true,
			message: '请输入首拼',
			trigger: 'blur'
		}],
		category: [{
			required: true,
			message: '请输入类别',
			trigger: 'blur'
		}],
		minUnits: [{
			required: true,
			message: '请输入最小单位',
			trigger: 'blur'
		}],
		stock: [{
			required: true,
			message: '请输入元钱',
			trigger: 'blur'
		}],
		retailPrice: [{
			required: true,
			message: '请输入零售价',
			trigger: 'blur'
		}],
		materialCode: [{
			required: true,
			message: '请输入物资代码',
			trigger: 'blur'
		}],
		unit: [{
			required: true,
			message: '请输入单位',
			trigger: 'blur'
		}],
		conversion: [{
			required: true,
			message: '请输入转发因子',
			trigger: 'blur'
		}],
	})

	//添加，修改初始化函数
	const init = () => {
		//重置表单
		ruleFormRef.value?.resetFields();
	}
	const getById = () => {
		//发送请求

	}
	//提交数据
	const chargingUpdate = () => {
		ruleFormRef.value?.validate(async (valid) => {
			console.log(valid);
			if (!valid) {
				console.log("错误")
				return
			}
			//发送请求保存数据

			//刷新表格数据事件
			emit("refresh");

			//关闭弹窗
			cancel();
		})
	}
	//取消的处理函数
	const cancel = () => {
		model.value = false;
	}
	const tabClick = (pane : TabsPaneContext, ev : Event) => {
		console.log(pane.index);
		activeIndex.value = pane.index ?? '0';
	}
	//文件上传成功
	const uploadSuccess = (resp : any) => {
		console.log(resp);
		let {
			errCode,
			errMsg,
			fileName
		} = resp;
		console.log({
			errCode,
			errMsg,
			fileName
		});
		if (errCode != 'success') {
			//弹窗提示
			return EIMessage({
				message: errMsg,
				type: 'warning',
			})
		}
		//存储文件名称
		this.dataForm.production = fileName;
	}
	//文件上传失败
	const uploadError = (eroor : any) => {
		console.log(eroor);
	}
	// 暴露出去的属性
	defineExpose({
		model,
		init,
		title
	})
</script>

<style>
</style>